<template>
  <div class="operation-screen" :class="{ 'fullscreen-mode': isFullscreen }" :style="screenStyle">
    <!-- 大屏标题 -->
    <div class="screen-header">
      <div class="header-decoration left"></div>
      <h1 class="screen-title">运营决策分析大屏</h1>
      <div class="header-decoration right"></div>
      <div class="header-controls">
        <FullscreenButton />
        <div class="current-time">{{ currentTime }}</div>
      </div>
    </div>

    <!-- 核心KPI指标 -->
    <div class="kpi-section">
      <BorderBox type="2" class="kpi-card">
        <DigitalFlop
          :value="kpiMetrics.revenue"
          title="总营收"
          unit="万元"
          :fontSize="28"
          color="#8b5cf6"
          :precision="1"
        />
      </BorderBox>

      <BorderBox type="1" class="kpi-card">
        <DigitalFlop
          :value="kpiMetrics.profit"
          title="净利润"
          unit="万元"
          :fontSize="28"
          color="#00ff88"
          :precision="1"
        />
      </BorderBox>

      <BorderBox type="3" class="kpi-card">
        <DigitalFlop
          :value="kpiMetrics.roi"
          title="投资回报率"
          unit="%"
          :fontSize="28"
          color="#ff6b6b"
          :precision="1"
        />
      </BorderBox>

      <BorderBox type="2" class="kpi-card">
        <DigitalFlop
          :value="kpiMetrics.customerSat"
          title="客户满意度"
          unit="%"
          :fontSize="28"
          color="#00d4ff"
          :precision="1"
        />
      </BorderBox>

      <BorderBox type="1" class="kpi-card">
        <WaterLevel
          :value="kpiMetrics.marketShare"
          title="市场份额"
          :size="80"
          :colors="['#ffd93d', '#ff9500']"
        />
      </BorderBox>

      <BorderBox type="3" class="kpi-card">
        <WaterLevel
          :value="kpiMetrics.efficiency"
          title="运营效率"
          :size="80"
          :colors="['#8b5cf6', '#6366f1']"
        />
      </BorderBox>
    </div>

    <!-- 主要分析区域 -->
    <div class="analysis-section">
      <!-- 左侧：业务健康度 -->
      <div class="analysis-left">
        <BorderBox type="1" class="chart-box">
          <div class="chart-container">
            <h3 class="chart-title">业务健康度雷达图</h3>
            <div ref="healthRadarChart" class="chart-content"></div>
          </div>
        </BorderBox>
      </div>

      <!-- 中间：预测分析 -->
      <div class="analysis-center">
        <BorderBox type="2" class="chart-box">
          <div class="chart-container">
            <h3 class="chart-title">业绩预测分析</h3>
            <div ref="predictionChart" class="chart-content"></div>
          </div>
        </BorderBox>
      </div>

      <!-- 右侧：风险评估 -->
      <div class="analysis-right">
        <BorderBox type="3" class="chart-box">
          <div class="chart-container">
            <h3 class="chart-title">风险评估矩阵</h3>
            <div ref="riskChart" class="chart-content"></div>
          </div>
        </BorderBox>
      </div>
    </div>

    <!-- 底部决策建议 -->
    <div class="decision-section">
      <BorderBox type="2" class="decision-box">
        <div class="decision-container">
          <h3 class="chart-title">智能决策建议</h3>
          <div class="decision-content">
            <div class="decision-left">
              <div class="suggestion-list">
                <div
                  v-for="(suggestion, index) in decisionSuggestions"
                  :key="index"
                  class="suggestion-item"
                  :class="`priority-${suggestion.priority}`"
                >
                  <div class="suggestion-icon">{{ suggestion.icon }}</div>
                  <div class="suggestion-text">
                    <div class="suggestion-title">{{ suggestion.title }}</div>
                    <div class="suggestion-desc">{{ suggestion.description }}</div>
                  </div>
                  <div class="suggestion-impact">{{ suggestion.impact }}</div>
                </div>
              </div>
            </div>
            <div class="decision-right">
              <div class="metrics-summary">
                <div class="summary-item">
                  <span class="summary-label">预计收益提升</span>
                  <span class="summary-value positive">+15.6%</span>
                </div>
                <div class="summary-item">
                  <span class="summary-label">成本优化空间</span>
                  <span class="summary-value positive">-8.2%</span>
                </div>
                <div class="summary-item">
                  <span class="summary-label">风险控制指数</span>
                  <span class="summary-value neutral">良好</span>
                </div>
                <div class="summary-item">
                  <span class="summary-label">执行难度评级</span>
                  <span class="summary-value warning">中等</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </BorderBox>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import * as echarts from 'echarts'
import BorderBox from './components/BorderBox.vue'
import DigitalFlop from './components/DigitalFlop.vue'
import WaterLevel from './components/WaterLevel.vue'
import FullscreenButton from './components/FullscreenButton.vue'
import { useScreenAdapter } from './utils/adapter'
import { addAnimationStyles } from './utils/animation'
import { useFullscreen } from './composables/useFullscreen'

// 全屏控制
const { isFullscreen } = useFullscreen()

// 大屏适配
const { scale } = useScreenAdapter()

// 计算屏幕样式
const screenStyle = computed(() => {
  if (isFullscreen.value) {
    return {
      // 全屏模式下不使用缩放，直接占满整个屏幕
      transform: 'none',
      position: 'fixed',
      top: 0,
      left: 0,
      width: '100vw',
      height: '100vh',
      zIndex: 9999,
      padding: '20px',
      margin: '0',
      boxSizing: 'border-box'
    }
  } else {
    return {
      transform: 'scale(1)',
      width: '100%',
      height: 'auto',
      minHeight: '800px'
    }
  }
})

// 响应式数据
const currentTime = ref('')
const healthRadarChart = ref(null)
const predictionChart = ref(null)
const riskChart = ref(null)
let healthRadarInstance = null
let predictionInstance = null
let riskInstance = null
let timeTimer = null

// KPI指标数据
const kpiMetrics = ref({
  revenue: 3256.8,
  profit: 892.4,
  roi: 24.6,
  customerSat: 94.2,
  marketShare: 18.5,
  efficiency: 87.3
})

// 决策建议数据
const decisionSuggestions = ref([
  {
    icon: '🎯',
    title: '优化营销策略',
    description: '基于用户画像调整广告投放，预计提升转化率12%',
    impact: '高影响',
    priority: 'high'
  },
  {
    icon: '📦',
    title: '库存优化',
    description: '调整热销商品库存配比，减少滞销风险',
    impact: '中影响',
    priority: 'medium'
  },
  {
    icon: '💰',
    title: '价格策略调整',
    description: '动态定价策略优化，提升利润空间',
    impact: '高影响',
    priority: 'high'
  },
  {
    icon: '🔧',
    title: '供应链优化',
    description: '优化供应商结构，降低采购成本8%',
    impact: '中影响',
    priority: 'medium'
  }
])

// 更新时间
const updateTime = () => {
  const now = new Date()
  currentTime.value = now.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  })
}

// 初始化业务健康度雷达图
const initHealthRadarChart = () => {
  if (!healthRadarChart.value) return

  healthRadarInstance = echarts.init(healthRadarChart.value)
  
  const option = {
    backgroundColor: 'transparent',
    tooltip: {
      trigger: 'item'
    },
    radar: {
      indicator: [
        { name: '用户增长', max: 100 },
        { name: '收入增长', max: 100 },
        { name: '市场份额', max: 100 },
        { name: '客户满意', max: 100 },
        { name: '运营效率', max: 100 },
        { name: '创新能力', max: 100 }
      ],
      center: ['50%', '50%'],
      radius: 80,
      axisName: {
        color: '#ffffff',
        fontSize: 12
      },
      splitLine: {
        lineStyle: { color: 'rgba(139, 92, 246, 0.3)' }
      },
      splitArea: {
        areaStyle: {
          color: ['rgba(139, 92, 246, 0.1)', 'rgba(139, 92, 246, 0.05)']
        }
      },
      axisLine: {
        lineStyle: { color: 'rgba(139, 92, 246, 0.5)' }
      }
    },
    series: [{
      name: '业务健康度',
      type: 'radar',
      data: [
        {
          value: [85, 92, 78, 94, 87, 82],
          name: '当前状态',
          itemStyle: { color: '#8b5cf6' },
          areaStyle: { color: 'rgba(139, 92, 246, 0.3)' }
        },
        {
          value: [90, 95, 85, 96, 92, 88],
          name: '目标状态',
          itemStyle: { color: '#00ff88' },
          areaStyle: { color: 'rgba(0, 255, 136, 0.2)' }
        }
      ]
    }]
  }
  
  healthRadarInstance.setOption(option)
}

// 初始化预测分析图表
const initPredictionChart = () => {
  if (!predictionChart.value) return

  predictionInstance = echarts.init(predictionChart.value)
  
  const option = {
    backgroundColor: 'transparent',
    tooltip: {
      trigger: 'axis',
      axisPointer: { type: 'cross' }
    },
    legend: {
      data: ['历史数据', '预测数据', '置信区间'],
      textStyle: { color: '#ffffff' },
      top: 10
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      top: '15%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['Q1', 'Q2', 'Q3', 'Q4', 'Q1+1', 'Q2+1', 'Q3+1', 'Q4+1'],
      axisLine: { lineStyle: { color: '#8b5cf6' } },
      axisLabel: { color: '#ffffff' }
    },
    yAxis: {
      type: 'value',
      axisLine: { lineStyle: { color: '#8b5cf6' } },
      axisLabel: { color: '#ffffff' },
      splitLine: { lineStyle: { color: 'rgba(139, 92, 246, 0.2)' } }
    },
    series: [
      {
        name: '历史数据',
        type: 'line',
        data: [820, 932, 901, 934, null, null, null, null],
        lineStyle: { color: '#8b5cf6', width: 3 },
        symbol: 'circle',
        symbolSize: 6
      },
      {
        name: '预测数据',
        type: 'line',
        data: [null, null, null, 934, 1050, 1180, 1290, 1420],
        lineStyle: { color: '#00ff88', width: 3, type: 'dashed' },
        symbol: 'diamond',
        symbolSize: 6
      }
    ]
  }
  
  predictionInstance.setOption(option)
}

// 初始化风险评估图表
const initRiskChart = () => {
  if (!riskChart.value) return

  riskInstance = echarts.init(riskChart.value)

  const option = {
    backgroundColor: 'transparent',
    tooltip: {
      trigger: 'item',
      formatter: (params) => {
        return `${params.data.name}<br/>影响度: ${params.data.value[0]}<br/>概率: ${params.data.value[1]}`
      }
    },
    grid: {
      left: '10%',
      right: '10%',
      bottom: '10%',
      top: '10%',
      containLabel: true
    },
    xAxis: {
      type: 'value',
      name: '影响度',
      nameLocation: 'middle',
      nameGap: 25,
      nameTextStyle: { color: '#ffffff' },
      min: 0,
      max: 10,
      axisLine: { lineStyle: { color: '#8b5cf6' } },
      axisLabel: { color: '#ffffff' },
      splitLine: { lineStyle: { color: 'rgba(139, 92, 246, 0.2)' } }
    },
    yAxis: {
      type: 'value',
      name: '发生概率',
      nameLocation: 'middle',
      nameGap: 35,
      nameTextStyle: { color: '#ffffff' },
      min: 0,
      max: 10,
      axisLine: { lineStyle: { color: '#8b5cf6' } },
      axisLabel: { color: '#ffffff' },
      splitLine: { lineStyle: { color: 'rgba(139, 92, 246, 0.2)' } }
    },
    series: [{
      name: '风险评估',
      type: 'scatter',
      symbolSize: (data) => data[2] * 3,
      data: [
        { value: [8, 7, 15], name: '市场竞争加剧', itemStyle: { color: '#ff6b6b' } },
        { value: [6, 4, 10], name: '供应链中断', itemStyle: { color: '#ff9500' } },
        { value: [4, 6, 8], name: '技术更新滞后', itemStyle: { color: '#8b5cf6' } },
        { value: [7, 3, 12], name: '政策法规变化', itemStyle: { color: '#00d4ff' } },
        { value: [3, 8, 6], name: '人才流失', itemStyle: { color: '#00ff88' } },
        { value: [5, 5, 9], name: '资金流动性', itemStyle: { color: '#ffd93d' } }
      ],
      label: {
        show: true,
        position: 'top',
        color: '#ffffff',
        fontSize: 10,
        formatter: '{b}'
      },
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }]
  }

  riskInstance.setOption(option)
}

// 生命周期
onMounted(() => {
  addAnimationStyles()
  updateTime()
  timeTimer = setInterval(updateTime, 1000)

  setTimeout(() => {
    initHealthRadarChart()
    initPredictionChart()
    initRiskChart()
  }, 100)
})

onUnmounted(() => {
  if (timeTimer) clearInterval(timeTimer)
  if (healthRadarInstance) healthRadarInstance.dispose()
  if (predictionInstance) predictionInstance.dispose()
  if (riskInstance) riskInstance.dispose()
})
</script>

<style scoped>
.header-controls {
  position: absolute;
  right: 40px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 20px;
}

.operation-screen {
  width: 1920px;
  height: 1080px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
  color: #ffffff;
  font-family: 'Microsoft YaHei', sans-serif;
  transform-origin: 0 0;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 20px;
  box-sizing: border-box;
}

/* 普通模式样式 */
.operation-screen:not(.fullscreen-mode) {
  width: 100%;
  height: auto;
  min-height: 800px;
  padding: 20px;
  box-sizing: border-box;
}

.operation-screen:not(.fullscreen-mode) .screen-header {
  margin-bottom: 15px;
}

.operation-screen:not(.fullscreen-mode) .screen-title {
  font-size: 28px;
}

.operation-screen:not(.fullscreen-mode) .kpi-section {
  margin: 0 0 20px;
}

.operation-screen:not(.fullscreen-mode) .analysis-section {
  margin: 0 0 20px;
}

.operation-screen:not(.fullscreen-mode) .decision-section {
  margin: 0;
}

.operation-screen::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 20% 20%, rgba(139, 92, 246, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(0, 255, 136, 0.1) 0%, transparent 50%);
  pointer-events: none;
}

.screen-header {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
  position: relative;
  margin-bottom: 20px;
  flex-shrink: 0;
}

.header-decoration {
  width: 200px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #8b5cf6, transparent);
}

.screen-title {
  font-size: 36px;
  font-weight: bold;
  margin: 0 40px;
  text-align: center;
  background: linear-gradient(135deg, #8b5cf6, #ffffff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 0 20px rgba(139, 92, 246, 0.5);
}

.current-time {
  font-size: 18px;
  color: #ffffff !important;
  font-family: 'Monaco', monospace;
  background: rgba(139, 92, 246, 0.2);
  padding: 8px 16px;
  border: 1px solid rgba(139, 92, 246, 0.4);
  border-radius: 6px;
  text-shadow: 0 0 10px rgba(139, 92, 246, 0.8);
  box-shadow: 0 0 15px rgba(139, 92, 246, 0.3);
}

.kpi-section {
  display: flex;
  justify-content: space-between;
  margin-bottom: 25px;
  gap: 15px;
  flex-shrink: 0;
  height: 140px;
}

.kpi-card {
  flex: 1;
  height: 100%;
}

.chart-box {
  width: 100%;
  height: 100%;
}

.decision-box {
  width: 100%;
  height: 100%;
}

.analysis-left,
.analysis-center,
.analysis-right {
  flex: 1;
  height: 100%;
}

.analysis-section {
  display: flex;
  justify-content: space-between;
  margin-bottom: 25px;
  gap: 20px;
  flex-shrink: 0;
  height: 350px;
}

.decision-section {
  flex: 1;
  min-height: 280px;
}

.chart-container,
.decision-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.operation-screen .chart-title,
.operation-screen h3.chart-title {
  font-size: 18px !important;
  color: #8b5cf6 !important;
  margin: 0 0 15px 0 !important;
  text-align: center !important;
  font-weight: bold !important;
}

.chart-content {
  flex: 1;
}

.decision-content {
  flex: 1;
  display: flex;
  gap: 20px;
}

.decision-left {
  flex: 2;
}

.decision-right {
  flex: 1;
}

.suggestion-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.suggestion-item {
  display: flex;
  align-items: center;
  padding: 12px;
  border-radius: 8px;
  background: rgba(139, 92, 246, 0.1);
  border-left: 4px solid;
  transition: all 0.3s ease;
}

.suggestion-item.priority-high {
  border-left-color: #ff6b6b;
}

.suggestion-item.priority-medium {
  border-left-color: #ff9500;
}

.suggestion-item:hover {
  background: rgba(139, 92, 246, 0.2);
  transform: translateX(5px);
}

.suggestion-icon {
  font-size: 24px;
  margin-right: 15px;
}

.suggestion-text {
  flex: 1;
}

.suggestion-title {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 4px;
}

.suggestion-desc {
  font-size: 12px;
  opacity: 0.8;
}

.suggestion-impact {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 4px;
  background: rgba(139, 92, 246, 0.3);
}

.metrics-summary {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 20px;
  background: rgba(139, 92, 246, 0.1);
  border-radius: 8px;
}

.summary-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.summary-label {
  font-size: 14px;
  opacity: 0.8;
}

.summary-value {
  font-size: 16px;
  font-weight: bold;
}

.summary-value.positive {
  color: #00ff88;
}

.summary-value.neutral {
  color: #00d4ff;
}

.summary-value.warning {
  color: #ff9500;
}

/* 全屏模式样式 */
.operation-screen.fullscreen-mode {
  width: 100vw !important;
  height: 100vh !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 9999 !important;
  padding: 20px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

/* 全屏模式下调整各区域高度 - 使用相对高度 */
.operation-screen.fullscreen-mode .screen-header {
  height: 8vh !important;
  margin-bottom: 1.5vh !important;
  flex-shrink: 0 !important;
}

.operation-screen.fullscreen-mode .kpi-section {
  height: 15vh !important;
  margin-bottom: 1.5vh !important;
  flex-shrink: 0 !important;
}

.operation-screen.fullscreen-mode .analysis-section {
  height: 35vh !important;
  margin-bottom: 1.5vh !important;
  flex-shrink: 0 !important;
}

.operation-screen.fullscreen-mode .decision-section {
  flex: 1 !important;
  margin-bottom: 0 !important;
  min-height: 35vh !important;
}

/* 全屏模式下确保无边距无滚动条 */
body.fullscreen-active,
html.fullscreen-active {
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  width: 100% !important;
  height: 100% !important;
}

body.fullscreen-active * {
  box-sizing: border-box;
}
</style>
